<template>
  <div class="app-container" >
    <el-form style="height: 90%;overflow:auto" class="formStyle" :model="form" :rules="rules" label-width="1.25rem" >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-weight: bold;font-size: 16px;margin-left: 10px">规则设置</span>
        </div>
        <el-form-item label="规则名称" prop="ruleName">
          <el-input placeholder="请输入" style="width: 3.55rem" v-model="form.ruleName"></el-input>
        </el-form-item>
        <el-form-item label="打卡人员">
          <el-tag v-for="user in selectUserList" :key="user.userId" style="margin:2px"
                  closable @close="handleCloseTag(user)" >{{user.nickName}} </el-tag>
          <el-tag v-for="item in selectDeptList" type="info" :key="item.deptId" style="margin:2px"
                  closable @close="handleDeptCloseTag(item)" >{{item.label}} </el-tag>
          <el-button size="mini" @click="getDeptAndUser">添加</el-button>
        </el-form-item>
        <el-form-item label="打卡时间">
          <div>
            <el-button size="mini" @click="openClockTime">添加</el-button>
          </div>
          <el-table :data="form.clockTimeListInfo">
            <el-table-column label="打卡日"  prop="result" sortable/>
            <el-table-column label="上下班时间" sortable>
              <template slot-scope="scope">
                <!-- `checked` 为 true 或 false -->
                <span>{{scope.row.timeArray.startTime}} — {{scope.row.timeArray.endTime}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                >编辑</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="节假日" prop="enableSkipHoliday">
          <el-checkbox v-model="form.enableSkipHoliday">中国法定节假日不用打卡</el-checkbox>
          <span style="font-size: 12px;color: grey;margin-top: 2px;">法定节假日、调休期间不用打卡，补班日期需打卡</span>
          <a style="margin-left: 10px" @click="openFullcalendar" >查看法定节假日日历</a>
        </el-form-item>
      </el-card>
      <el-card class="box-card"  style="margin-top: 10px" >
        <div slot="header" class="clearfix">
          <span style="font-weight: bold;font-size: 16px;margin-left: 10px">打卡方式</span>
        </div>
        <el-form-item label="打卡位置">
          <template #label>
            <span>
              打卡位置
              <el-tooltip content="可添加多个打卡地点，并设置有效打卡范围" placement="top">
                <i class="el-icon-warning"></i>
            </el-tooltip>

              </span>
          </template>
          <div>
            <el-button size="mini" @click="openClockPlace">添加</el-button>
          </div>
          <el-table :data="form.clockLocationListInfo">
            <el-table-column label="地点名称"  prop="address" sortable/>
            <el-table-column label="有效范围(米)" prop="range" sortable>
            </el-table-column>
            <el-table-column label="操作" align="center" >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleLocationDelete(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-card>
      <el-card class="box-card" style="margin-top: 10px">
        <div slot="header" class="clearfix" >
          <span style="font-weight: bold;font-size: 16px;margin-left: 10px">补卡请假设置</span>
          <!--          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
        </div>
        <el-form-item label="补卡申请" prop="enableReplaceCard">
          <el-checkbox v-model="form.enableReplaceCard">开启</el-checkbox>
          <span style="font-size: 12px;color: grey;margin-top: 2px;margin-left:10px">员工异常打卡时可提交申请，审批通过后修正异常</span>
          <div style="padding: 16px;background-color: rgba(247,247,248,1);
            border: 1px solid rgba(247,247,248,1)">
            <div>
              <span>允许补卡时间限制</span>
              <select :disabled="!form.enableReplaceCard" v-model="form.timeLimit" style="height: 30px;margin-left: 10px">
                <option v-for="(option,index) in replaceCardList" :value="option.value" :label="option.label" :key="index"></option>
              </select>
            </div>
            <div>
              <span>每月允许补卡次数</span>
              <select :disabled="!form.enableReplaceCard" v-model="form.replaceNumberPermon" style="height: 30px;margin-left: 10px">
                <option v-for="(option,index) in replaceList" :value="option.value" :label="option.label" :key="index"></option>
              </select>
            </div>
            <div >
              <span>每月补卡截止日期</span>
              <select :disabled="!form.enableReplaceCard" v-model="form.deadlinePermon" style="height: 30px;margin-left: 10px">
                <option v-for="(option,index) in deadlineList" :value="option.value" :label="option.label" :key="index"></option>
              </select>
              <span style="font-size: 12px;color: grey;margin-top: 2px;margin-left:10px">补卡截止日期当天零点开始，不可对上月异常打卡提交申请</span>
            </div>
<!--            <div>-->
<!--              <span>补卡提醒</span>-->
<!--              <select :disabled="!form.enableReplaceCard" v-model="form.replaceMind" style="height: 30px;margin-left: 10px">-->
<!--                <option v-for="option in replaceOption" :value="option.value" :label="option.label"></option>-->
<!--              </select>-->

<!--              <select :disabled="!form.enableReplaceCard" v-if="form.replaceMind==1" v-model="form.mindDate" style="height: 30px;margin-left: 10px">-->
<!--                <option v-for="option in remindList" :value="option.value" :label="option.label"></option>-->
<!--              </select>-->
<!--              <span style="font-size: 12px;color: grey;margin-top: 2px;margin-left:10px">设置日期若在周末将在周五提前推送</span>-->
<!--            </div>-->
          </div>
        </el-form-item>
      </el-card>
      <el-card class="box-card" style="margin-top: 10px">
        <div slot="header" class="clearfix" >
          <span style="font-weight: bold;font-size: 16px;margin-left: 10px">更多设置</span>
        </div>
        <el-form-item>
          <template #label>
            <span>
              手机提醒
              <el-tooltip content="提醒时间前完成打卡将无法收到该次打卡提醒。" placement="top">
                <i class="el-icon-warning"></i>
            </el-tooltip>

              </span>
          </template>
          <div >
            <span>上班</span>
            <select  v-model="form.mindBefore" style="height: 30px;margin-left: 10px">
              <option v-for="(option,index) in dutyMindList" :value="option.value" :label="option.label" :key="index"></option>
            </select>
            <span style="margin-left: 10px">—下班</span>
            <select  v-model="form.mindAfter" style="height: 30px;margin-left: 10px">
              <option v-for="(option,index) in offMindList" :value="option.value" :label="option.label" :key="index"></option>
            </select>
          </div>
        </el-form-item>
<!--        <el-form-item label="拍照与人脸识别" label-width="130px">-->
<!--          <el-checkbox-group size="mini" @change="getPhoto" v-model="form.facialRecognitionCheckInfo" class="checkbox-group-wrapper">-->
<!--            <el-checkbox v-for="item in photoList" v-if="!item.hidden" :data-a="checked"-->
<!--                         :label="item.value" :key="item.value" :value="item.value">{{item.label}}</el-checkbox>-->
<!--          </el-checkbox-group>-->
<!--        </el-form-item>-->
        <el-form-item label="范围外打卡" label-width="130px">
          <el-radio-group v-model="form.clockScope"  class="checkbox-group-wrapper">
            <el-radio :label="1" style="margin-top: 15px">允许范围外打卡，记录为地点异常</el-radio>
            <el-radio :label="2" style="margin-top: 15px">允许范围外打卡，记录为正常外勤</el-radio>
            <el-radio :label="3" style="margin-top: 15px">不允许范围外打卡</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider />
        <el-form-item label="白名单">
          <el-tag v-for="user in form.selectWhiteListInfo"
                  :data-a="checked"
                  :key="user.userId" style="margin:2px"
                  closable @close="handDeleteWhiteTag(user)" >{{user.nickName}} </el-tag>
          <el-button size="mini" @click="getWhiteUser(1)">添加</el-button>
        </el-form-item>
<!--        <el-form-item>-->
<!--          <template #label>-->
<!--            <span>-->
<!--              汇报对象-->
<!--              <el-tooltip content="可在次日上午接收打卡人员打卡汇报，查看相应打卡记录" placement="top">-->
<!--                <i class="el-icon-warning"></i>-->
<!--            </el-tooltip>-->
<!--              </span>-->
<!--          </template>-->
<!--          <el-tag v-for="user in form.selectReportListInfo"-->
<!--                  :data-a="checked"-->
<!--                  :key="user.userId" style="margin:2px"-->
<!--                  closable @close="handDeleteReportTag(user)" >{{user.nickName}} </el-tag>-->
<!--          <el-button size="mini" @click="getWhiteUser(2)">添加</el-button>-->
<!--        </el-form-item>-->
        <el-form-item label="外勤人员">
          <el-tag v-for="user in form.selectOutsideListInfo"
                  :data-a="checked"
                  :key="user.userId" style="margin:2px"
                  closable @close="handDeleteOutsideTag(user)" >{{user.nickName}} </el-tag>
          <el-button size="mini" @click="getWhiteUser(3)">添加</el-button>
        </el-form-item>
      </el-card>
      <el-card class="box-card" style="margin-top: 10px">
        <el-form-item label="生效时间">
          <el-radio-group v-model="form.effectuateType" size="mini">
            <el-radio label="1" class="radio-item" border>立即生效</el-radio>
            <el-radio label="2" class="radio-item" border>明日生效</el-radio>
          </el-radio-group>
          <i v-if="form.effectuateType==2" class="el-icon-warning"></i>
          <span v-if="form.effectuateType==2" style="font-size: 12px;color: grey;margin-top: 2px;">修改点将于明日生效</span>
        </el-form-item>
      </el-card>
    </el-form>
    <div style="display: flex; justify-content: center; align-items: center; margin-top:0.125rem; width: 100%; height: calc(10% - 0.125rem); background-color: white">
      <el-button type="primary" style="width: 3rem" @click="submitClockRule">保存规则</el-button>
    </div>
    <clock-user-depart
      ref="clockUserDepart"
      :multiple="true" @confirmUser="clickUser" :propUserList = 'propUserList' :proDeptList='selectDeptList'/>
    <clock-time ref="clockTime" @confirmUser="confirmClockTime" :forbidList="forbidList" :clockTimeData="selectClockTimeData"/>
    <fullcalendar ref="fullcalendar"/>
    <clock-dept-user ref="clockUser" :propUserList="clockUserList" :type="clockType" @confirmUser="collectWhiteList"/>
    <clock-place
      @selPosition="selPosition"
      :positionDialog.sync="positionDialog" ref="clockPlace"/>
  </div>
</template>
<script>

import clockUserDepart from "@/views/components/user/clock-user-depart.vue"
import SysDeptUser from "@/views/components/user/sys-dept-user.vue";
import ClockTime from "@/views/components/user/clock-time.vue";
import Fullcalendar from "@/views/components/user/fullCalendar.vue";
import ClockPlace from "@/views/oa/humanClock/components/clockPlace.vue";
import {listHumanClock,getHumanClock,addHumanClock,updateHumanClock,delHumanClock} from "@/api/oa/humanClock";
import ClockDeptUser from "@/views/oa/humanClock/components/clock-dept-user.vue";
export default {
  name: "editRule",
  dicts: ["act_status", "purchase_type"],
  components: {
    ClockDeptUser,
    Fullcalendar,
    ClockTime,
    SysDeptUser,
    clockUserDepart,
    ClockPlace
  },
  data() {
    return {

      positionDialog:false,
      clockType:"",
      title:"规则设置",
      userName: this.$store.getters.nickName,
      checked:true,
      tempFacialList:[],
      form:{
        ruleName:undefined,
        clockTimeListInfo:[],
        enableSkipHoliday:true,
        clockLocationListInfo:[],
        clockTypeList:[],
        enableReplaceCard:true,
        timeLimit:"0",
        replaceNumberPermon:"1",
        deadlinePermon:"0",
        replaceMind:"1",
        mindDate:"30",
        mindBefore:"10",
        mindAfter:"0",
        mindBeAfter:"0",
        facialRecognitionCheckInfo:[],
        clockScope:3,
        effectuateType:'1',
        selectWhiteListInfo:[],
        selectReportListInfo:[],
        selectOutsideListInfo:[],
      },
      rules:{
        id: [
          { required: true, message: "主键ID不能为空", trigger: "blur" }
        ],
      },
      whiteList:[],
      reportList:[],
      propUserList:[],
      propDeptList:[],
      selectUserList:[],
      selectDeptList:[],
      forbidList:[],
      selectClockTimeData:{},
      replaceCardList:[
        {
          label:"无限制",
          value:"0",
        },
        {
          label:"1天",
          value:"1",
        },
        {
          label:"2天",
          value:"2",
        },{
          label:"3天",
          value:"3",
        },{
          label:"4天",
          value:"4",
        },{
          label:"5天",
          value:"5",
        },{
          label:"6天",
          value:"6",
        },{
          label:"7天",
          value:"7",
        },{
          label:"8天",
          value:"8",
        },{
          label:"9天",
          value:"9",
        },{
          label:"10天",
          value:"10",
        },{
          label:"15天",
          value:"15",
        },{
          label:"20天",
          value:"20",
        },{
          label:"30天",
          value:"30",
        },{
          label:"45天",
          value:"45",
        },{
          label:"60天",
          value:"60",
        },{
          label:"90天",
          value:"90",
        },{
          label:"120天",
          value:"120",
        },{
          label:"150天",
          value:"150",
        },{
          label:"180天",
          value:"180",
        },
      ],
      replaceList:[
        {
          label:"无限制",
          value:"0",
        },{
          label:"1次",
          value:"1",
        },{
          label:"2次",
          value:"2",
        },{
          label:"3次",
          value:"3",
        },{
          label:"4次",
          value:"4",
        },{
          label:"5次",
          value:"5",
        },{
          label:"6次",
          value:"6",
        },{
          label:"7次",
          value:"7",
        },{
          label:"8次",
          value:"8",
        },{
          label:"9次",
          value:"9",
        },{
          label:"10次",
          value:"10",
        },{
          label:"11次",
          value:"11",
        },{
          label:"12次",
          value:"12",
        },{
          label:"13次",
          value:"13",
        },{
          label:"14次",
          value:"14",
        },{
          label:"15次",
          value:"15",
        },{
          label:"20次",
          value:"20",
        },{
          label:"25次",
          value:"25",
        },{
          label:"30次",
          value:"30",
        },{
          label:"35次",
          value:"35",
        },{
          label:"40次",
          value:"40",
        },{
          label:"45次",
          value:"45",
        },{
          label:"50次",
          value:"50",
        },{
          label:"55次",
          value:"55",
        },{
          label:"60次",
          value:"60",
        },
      ],
      deadlineList:[
        {
          label:"不设置",
          value:"0",
        },
        {
          label:"下月1日",
          value:"1",
        },
        {
          label:"下月2日",
          value:"2",
        },
        {
          label:"下月3日",
          value:"3",
        },
        {
          label:"下月4日",
          value:"4",
        },
        {
          label:"下月5日",
          value:"5",
        },
        {
          label:"下月6日",
          value:"6",
        },
        {
          label:"下月7日",
          value:"7",
        }, {
          label:"下月8日",
          value:"8",
        }, {
          label:"下月9日",
          value:"9",
        }, {
          label:"下月10日",
          value:"10",
        }, {
          label:"下月11日",
          value:"11",
        }, {
          label:"下月12日",
          value:"12",
        }, {
          label:"下月13日",
          value:"13",
        }, {
          label:"下月14日",
          value:"14",
        }, {
          label:"下月15日",
          value:"15",
        }, {
          label:"下月16日",
          value:"16",
        }, {
          label:"下月17日",
          value:"17",
        }, {
          label:"下月18日",
          value:"18",
        }, {
          label:"下月19日",
          value:"19",
        }, {
          label:"下月20日",
          value:"20",
        }, {
          label:"下月21日",
          value:"21",
        }, {
          label:"下月22日",
          value:"22",
        }, {
          label:"下月23日",
          value:"23",
        }, {
          label:"下月24日",
          value:"24",
        }, {
          label:"下月25日",
          value:"26",
        }, {
          label:"下月26日",
          value:"26",
        }, {
          label:"下月27日",
          value:"27",
        }, {
          label: "下月28日",
          value: "28",
        }
      ],
      replaceOption:[
        {
          label:"不提醒",
          value:"0",
        },{
          label:"提醒",
          value:"1",
        },
      ],
      remindList:[
        {
          label:"当月15日",
          value:"15",
        },{
          label:"当月16日",
          value:"16",
        },{
          label:"当月17日",
          value:"17",
        },{
          label:"当月18日",
          value:"18",
        },{
          label:"当月19日",
          value:"19",
        },{
          label:"当月20日",
          value:"20",
        },{
          label:"当月21日",
          value:"21",
        },{
          label:"当月22日",
          value:"22",
        },{
          label:"当月23日",
          value:"23",
        },{
          label:"当月24日",
          value:"24",
        },{
          label:"当月25日",
          value:"25",
        },{
          label:"当月26日",
          value:"26",
        },{
          label:"当月27日",
          value:"27",
        },{
          label:"当月28日",
          value:"28",
        },{
          label:"当月29日",
          value:"29",
        },{
          label:"当月30日",
          value:"30",
        },{
          label:"次月01日",
          value:"31",
        }, {
          label:"次月02日",
          value:"32",
        },
        {
          label:"次月03日",
          value:"33",
        },{
          label:"次月04日",
          value:"34",
        },{
          label:"次月05日",
          value:"35",
        },{
          label:"次月06日",
          value:"36",
        },{
          label:"次月07日",
          value:"37",
        },{
          label:"次月08日",
          value:"38",
        },{
          label:"次月09日",
          value:"39",
        },{
          label:"次月10日",
          value:"40",
        },{
          label:"次月11日",
          value:"41",
        },{
          label:"次月12日",
          value:"42",
        },{
          label:"次月13日",
          value:"43",
        },{
          label:"次月14日",
          value:"44",
        },{
          label:"次月15日",
          value:"45",
        },{
          label:"次月16日",
          value:"46",
        },{
          label:"次月17日",
          value:"47",
        },{
          label:"次月18日",
          value:"48",
        },{
          label:"次月19日",
          value:"49",
        },{
          label:"次月20日",
          value:"50",
        },{
          label:"次月21日",
          value:"51",
        },{
          label:"次月22日",
          value:"52",
        },{
          label:"次月23日",
          value:"53",
        },{
          label:"次月24日",
          value:"54",
        },{
          label:"次月25日",
          value:"55",
        },{
          label:"次月26日",
          value:"56",
        },{
          label:"次月27日",
          value:"57",
        },{
          label:"次月28日",
          value:"58",
        },
      ],
      dutyMindList:[
        {
          label:"准点",
          value:"0",
        },
        {
          label:"前5分钟",
          value:"5",
        },{
          label:"前10分钟",
          value:"10",
        },{
          label:"前15分钟",
          value:"15",
        },{
          label:"前20分钟",
          value:"20",
        },
      ],
      offMindList:[
        {
          label:"准点",
          value:"0",
        },
        {
          label:"后10分钟",
          value:"10",
        },
        {
          label:"后20分钟",
          value:"20",
        },
        {
          label:"后30分钟",
          value:"30",
        },
        {
          label:"后60分钟",
          value:"60",
        },
      ],
      photoList:[
        {
          label:"员工打卡时必须拍照",
          value:"1",
          hidden:false
        },{
          label:"员工打卡时必须进行人脸识别验证",
          value:"2",
          hidden:false
        },{
          label:"真人验证",
          value:"3",
          hidden:true
        },{
          label:"备注只能拍照，不允许上传本地图片",
          value:"4",
          hidden:false
        },
      ],
      clockUserList:[],
    };
  },
  created() {},
  mounted() {
  },
  watch:{
    '$route':{
      handler (to,form) { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
        if (to.query.ruleId){
          getHumanClock(this.$route.query.ruleId).then(res=>{
            this.form=res.data;
            //打卡时间
            if (this.form.clockTimeList){
              this.form.clockTimeListInfo=JSON.parse(this.form.clockTimeList);
            }
            if (this.form.clockTypeList){
              this.form.clockTypeList=JSON.parse(this.form.clockTypeList);
              if (this.form.clockTypeList.length>0){
                this.form.clockTypeList.forEach(d=>{
                  if (d.label){
                    this.selectDeptList.push({
                      ...d
                    })
                  }else {
                    this.selectUserList.push({
                      ...d
                    })
                  }
                })
              }
            }

            //打卡位置
            if (this.form.clockLocationList){
              this.form.clockLocationListInfo=JSON.parse(this.form.clockLocationList);
            }
            //白名单
            if (this.form.selectWhiteList){
              this.form.selectWhiteListInfo=JSON.parse(this.form.selectWhiteList);
            }
            if (this.form.facialRecognitionCheck){
              this.form.facialRecognitionCheckInfo=JSON.parse(this.form.facialRecognitionCheck);
              this.tempFacialList=this.form.facialRecognitionCheckInfo;
              console.log(this.form.facialRecognitionCheckInfo)
              this.$nextTick(()=>{
                this.getPhoto()
              },300)
            }
            //汇报对象
            if (this.form.selectReportList){
              this.form.selectReportListInfo=JSON.parse(this.form.selectReportList);
            }
            //汇报对象
            if (this.form.selectOutsideList){
              this.form.selectOutsideListInfo=JSON.parse(this.form.selectOutsideList);
            }
            if (this.form.clockScope){
              this.form.clockScope=Number(this.form.clockScope)
            }
          })
        }
        else {
          this.form={
            ruleName:undefined,
            clockTimeListInfo:[],
            enableSkipHoliday:true,
            clockLocationListInfo:[],
            clockTypeList:[],
            enableReplaceCard:true,
            timeLimit:"0",
            replaceNumberPermon:"1",
            deadlinePermon:"0",
            replaceMind:"1",
            mindDate:"30",
            mindBefore:"10",
            mindAfter:"0",
            mindBeAfter:"0",
            facialRecognitionCheckInfo:[],
            clockScope:3,
            effectuateType:'1',
            selectWhiteListInfo:[],
            selectReportListInfo:[],
            selectOutsideListInfo:[],
          };
          this.selectUserList=[];
          this.selectDeptList=[];
        }
      },
      deep: true,  // 可以深度检测到 obj 对象的属性值的变化
      immediate: true //刷新加载  立马触发一次handler
   }
  },
  methods: {
    getDeptAndUser(){
      this.propUserList=[];
      if (this.selectUserList){
        this.propUserList = this.selectUserList.map(item => item.userId);
      }
      this.$refs.clockUserDepart.visible=true
    },
    getWhiteUser(val){
      this.clockType=val;
      this.clockUserList=[];
      if (val==1){
        if (this.form.selectWhiteListInfo){
          this.clockUserList=this.form.selectWhiteListInfo.map(item => item.userId);
        }
      }else if (val==2){
        if (this.form.selectReportListInfo){
          this.clockUserList=this.form.selectReportListInfo.map(item => item.userId);
        }
      }else if (val==3){
        if (this.form.selectOutsideListInfo){
          this.clockUserList=this.form.selectOutsideListInfo.map(item => item.userId);
        }
      }
      this.checked=!this.checked;
      this.$refs.clockUser.visible=true;
    },

    openClockTime(){
      this.forbidList = this.form.clockTimeListInfo.flatMap(item => item.checkedWeeks);
      this.selectClockTimeData={};
      this.$refs.clockTime.visible=true;
    },
    openClockPlace(){
      this.positionDialog=true
    },
    handleUpdate(row){
     let index=this.form.clockTimeListInfo.indexOf(row);
     let result = this.form.clockTimeListInfo.flatMap(item => item.checkedWeeks);
     this.forbidList=  result.filter(item=> !row.checkedWeeks.includes(item));
     row.index=index;
     this.selectClockTimeData=row;
     this.$refs.clockTime.visible=true;
    },
    handleDelete(row){
      this.form.clockTimeListInfo.splice(row, 1);
    },
    handleLocationDelete(row){
      this.form.clockLocationListInfo.splice(row,1)
    },
    collectWhiteList(userList){
      debugger
      if (this.clockType==1){
        this.form.selectWhiteListInfo=userList;
      }else if (this.clockType==2){
        this.form.selectReportListInfo=userList;
      }else if (this.clockType==3){
        this.$set(this.form,'selectOutsideListInfo',userList)
      }
      this.checked=!this.checked;
      this.$refs.clockUser.visible=false
    },
    clickUser(userList,deptList){
      console.log(userList)
      console.log(deptList)
      this.selectUserList=userList;
      this.selectDeptList=deptList;
      this.$refs.clockUserDepart.visible=false
    },
    selPosition(position){
        this.form.clockLocationListInfo.push({
          address:position.address,
          longitude:position.longitude,
          latitude:position.latitude,
          range:position.range,
        })
    },
    // 删除tag
    handleCloseTag(user){
      this.selectUserList.splice(this.selectUserList.indexOf(user), 1);
    },
    handDeleteWhiteTag(user){
      this.form.selectWhiteListInfo.splice(this.form.selectWhiteListInfo.indexOf(user), 1);
      this.checked=!this.checked;
    },
    handDeleteReportTag(user){
      this.form.selectReportListInfo.splice(this.form.selectReportListInfo.indexOf(user), 1);
      this.checked=!this.checked;
    },
    handDeleteOutsideTag(user){
      this.form.selectOutsideListInfo.splice(this.form.selectOutsideListInfo.indexOf(user), 1);
      // this.$set(this.form,'selectOutsideListInfo',this.form.selectOutsideListInfo)
      this.checked=!this.checked;
    },
    handleDeptCloseTag(item){
      this.selectDeptList.splice(this.selectDeptList.indexOf(item), 1);
      // this.$refs.tree.setChecked(item, false);
    },
    confirmClockTime(val){
      if (val.index!=-1){
        this.form.clockTimeListInfo[val.index]=val;
      }else {
        this.form.clockTimeListInfo.push(val);
      }
    },
    openFullcalendar(){
      this.$refs.fullcalendar.visible=true
    },
    getPhoto(val, oldVal){
      console.log(this.form.facialRecognitionCheckInfo)
      if (this.form.facialRecognitionCheckInfo.indexOf("1")!=-1&&this.tempFacialList.indexOf("4")==-1){
        this.form.facialRecognitionCheckInfo.push("4")
      }
      if (this.form.facialRecognitionCheckInfo.indexOf("2")!=-1) {
        this.photoList[2].hidden=false;
        if (this.tempFacialList.indexOf("4")==-1){
          this.form.facialRecognitionCheckInfo.push("1");
        }
        if (this.tempFacialList.indexOf("4")==-1){
          this.form.facialRecognitionCheckInfo.push("4");
        }
      }
      console.log(this.form.facialRecognitionCheckInfo)
      if (this.form.facialRecognitionCheckInfo.indexOf("2")==-1) {
        if (this.tempFacialList.indexOf("3")!=-1){
          this.form.facialRecognitionCheckInfo.splice( this.form.facialRecognitionCheckInfo.indexOf("3"),1);
        }
        this.photoList[2].hidden=true;
      }
      if (this.form.facialRecognitionCheckInfo.indexOf("1")!=-1&&this.form.facialRecognitionCheckInfo.indexOf("4")==-1&&this.tempFacialList.indexOf("4")!=-1){
        this.$message.error("拍照打卡不能上传本地图片");
        this.form.facialRecognitionCheckInfo=this.tempFacialList;
      }
      if (this.form.facialRecognitionCheckInfo.indexOf("1")==-1&&this.form.facialRecognitionCheckInfo.indexOf("2")!=-1&&this.tempFacialList.indexOf("1")!=-1){
        this.$message.error("人脸识别需启用拍照打卡");
        this.form.facialRecognitionCheckInfo=this.tempFacialList;
      }
      this.$set(this.form, "facialRecognitionCheckInfo", [...new Set(this.form.facialRecognitionCheckInfo)]);
      this.tempFacialList=this.form.facialRecognitionCheckInfo;
      this.checked=!this.checked;
      console.log(this.form.facialRecognitionCheckInfo)
    },
    submitClockRule(){
      //打卡人员
      if (this.selectDeptList.length>0||this.selectUserList.length>0){
        this.form.clockTypeList=this.selectUserList.concat(this.selectDeptList);
      }else {
        this.$message.error("打卡人员不能为空")
        return;
      }
      if (this.form.clockTypeList.length>0){
        this.form.clockTypeList=JSON.stringify(this.form.clockTypeList);
      }

      //打卡时间
      if (this.form.clockTimeListInfo.length>0){
        this.form.clockTimeList=JSON.stringify(this.form.clockTimeListInfo);
      }else {
        this.$message.error("打卡时间不能为空")
        return;
      }
      //打卡位置
      if (this.form.clockLocationListInfo.length>0){
        this.form.clockLocationList=JSON.stringify(this.form.clockLocationListInfo);
      }else {
        this.$message.error("打卡位置不能为空")
        return;
      }
      //白名单
      if (this.form.selectWhiteListInfo){
        if (this.form.selectWhiteListInfo.length>0){
          this.form.selectWhiteList=JSON.stringify(this.form.selectWhiteListInfo);
        }
      }
      // if (this.form.facialRecognitionCheckInfo.length>0){
      //   this.form.facialRecognitionCheck=JSON.stringify(this.form.facialRecognitionCheckInfo);
      // }
      // //汇报对象
      // if (this.form.selectReportListInfo.length>0){
      //   this.form.selectReportList=JSON.stringify(this.form.selectReportListInfo);
      // }
      //外勤人员
      if (this.form.selectOutsideListInfo){
        if (this.form.selectOutsideListInfo.length>0){
          this.form.selectOutsideList=JSON.stringify(this.form.selectOutsideListInfo);
        }
      }
      var currentView = this.$store.state.tagsView.visitedViews[0]
      for (currentView of this.$store.state.tagsView.visitedViews) {
        if (currentView.path === this.$route.path) {
          break
        }
      }
      if (this.form.id){
        updateHumanClock(this.form).then(res=>{
          if (res.code==200){
            this.$modal.msgSuccess("修改成功");
            this.$store.dispatch('tagsView/delView', currentView)
              .then(({ visitedViews }) => {
                if (currentView.path === this.$route.path) {
                  const latestView = this.$store.state.tagsView.visitedViews.slice(-1)[0]
                  if (latestView) {
                    this.$router.push(latestView)
                  } else {
                    // 如果没有其他标签则跳转到首页
                    if (currentView.name === '首页') {
                      this.$router.replace({ path: '/redirect' + currentView.fullPath })
                    } else {
                      this.$router.push('/')
                    }
                  }
                }
              })
          }
        })
      }else {
        addHumanClock(this.form).then(res=>{
          if (res.code==200){
            this.$modal.msgSuccess("新增成功");
            this.$store.dispatch('tagsView/delView', currentView)
              .then(({ visitedViews }) => {
                if (currentView.path === this.$route.path) {
                  const latestView = this.$store.state.tagsView.visitedViews.slice(-1)[0]
                  if (latestView) {
                    this.$router.push(latestView)
                  } else {
                    // 如果没有其他标签则跳转到首页
                    if (currentView.name === '首页') {
                      this.$router.replace({ path: '/redirect' + currentView.fullPath })
                    } else {
                      this.$router.push('/')
                    }
                  }
                }
              })
          }
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  padding: 0.125rem;
  overflow: hidden;
  background: #edefef;
  letter-spacing: 0.02rem;
  .top {
    width: 100%;
    height: 1.75rem;
    margin-bottom: 0.125rem;
    display: flex;
    .left {
      margin-left: 3.55rem;
      width: 70%;
      height: 100%;
      margin-right: 0.125rem;
      background-color: #ffffff;
    }
  }
  .left {
    width: 70%;
    height: 100%;
    margin-right: 0.125rem;
    .cygn {
      width: 100%;
      height: 1.75rem;
      margin-bottom: 0.125rem;
      background-color: #ffffff;
    }
    .dsp {
      margin-left: 3.55rem;
      width: 100%;
      height: calc(100% - 1.875rem);
      // margin-bottom: 0.125rem;
      background-color: #ffffff;
    }
    // .other {
    //   width: 100%;
    //   height: 1.75rem;
    //   // margin-bottom: 1.75rem;
    //   background-color: #d1729b;
    // }
  }
}

/* 设置滚动条宽度和高度 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /* 横向滚动条 */
  height: 8px; /* 纵向滚动条 必写 */
}
/* 设置滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #dde;
  border-radius: 3px;
}
#selectForm >>> .el-form-item__label {
  font-size: 12px;
}
::v-deep .bjsm .el-form-item__content{
  width: calc(100% - 130px) !important;
}
.formStyle{
  margin-left: 3.5rem;
  width: 65%;
}
::v-deep .box-card .el-card__header {
  border-bottom: none !important;
}
.checkbox-group-wrapper {
  display: flex;
  flex-direction: column;
}
.radio-item {
  margin-right: 10px; /* 调整单选之间的右侧间距 */
}
</style>
